<template>
    <div class="carefullyChosen">
        <div class="boxCard" v-for="titleCard in titleCards" :key="titleCard.id"  @click="handleClick">
            <el-image style="width: 75px; height: 75px; margin-right: 10px;" :src="titleCard.url" />
            <div class="boxCardText">
                <h5>
                    {{ titleCard.title }}
                </h5>
                <el-popover
                    placement="top"
                    :width="220"
                    trigger="hover"
                    :content="titleCard.content"
                >
                    <template #reference>
                        <span class="boxTextEllipsis">
                            {{ titleCard.content }}
                        </span>
                    </template>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'CarefullyChosen',
});
</script>

<script setup lang="ts">
    // 路由
    const router = useRouter();
    // 图片路径
    // const url ='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    const titleCards = reactive(
        [
            {
                id: '1',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/top-interview-150/cover',
                title: '面试经典150题',
                content: '最经典50题掌握面试技巧，让你快速通过面试'
            },
            {
                id: '2',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/dynamic-programming/cover',
                title: '动态规划(基础版)',
                content: '更细的知识点拆分，让入门更简单'
                },
            {
                id: '3',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/top-100-liked/cover',
                title: 'java入门题',
                content: '小白速度入门'
            },
            {
                id: '4',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/sql-premium-50/cover',
                title: '高频SQL题',
                content: '对应高阶数据库'
            },
            {
                id: '5',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/primers-list/cover',
                title: '[新]动计划·编程入门',
                content: '编程初学者的力扣适应手册'
            },
            {
                id: '6',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/special-interview-119/cover',
                title: '排序算法',
                content: '锻炼思维、思辨能力，让排序一眼望穿'
            },
            {
                id: '7',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/30-days-of-javascript/cover',
                title: '30天JavaScript挑战',
                content: '30天30题入门JavaScript'
            },
            {
                id: '8',
                url: 'https://assets.leetcode.cn/aliyun-lc-upload/study_plan_v2/mi-2023-fall-sprint/cover',
                title: '小米秋招真题笔记',
                content: '趁年轻，做点更真的题'
            },
        ]
    )

    const handleClick = () => {
        console.log('点击了卡片');
        router.push({ name: 'LeetCodeHot'});
    }
</script>

<style scoped>
.carefullyChosen {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* 卡片 */
.boxCard {
    width: 300px; /* 保持单个卡片宽度 */
    height: 90px;
    display: flex;
    align-items: center;
    background: white;
    box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.3); /* 增加阴影的可见度 */
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

/* 获取焦点时的样式 */
.boxCard:hover {
    box-shadow: 2px 2px 9px rgba(100, 100, 100, 0.5); /* 增加阴影的可见度 */
    cursor: pointer; /* 鼠标悬停时显示手形光标（如果需要） */
}

/* 卡片文字 */
.boxCardText {
    flex: 1; 
    overflow: hidden;
}

h5{
    margin: 0; 
    font-size: 15px; 
    font-weight: bold; 
    line-height: 1.2;
}
/* 文本溢出显示省略号 */
.boxTextEllipsis{
    font-size: 12px; 
    color: #666; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
    margin-top: 6px;
}

</style>
